<template>
  <div>
    <div>
      <van-image width="375" height="175" src="http://weigang.jiu12.com/img/bg.jpg" />
    </div>
    <ul class="contant_list">
      <li class="contain_item" v-for="(item, index) in shoplist" :key="index">
        <div class="con_title">{{item.infoname}}</div>
        <div class="con_content">
          <div class="con_left">
            <van-image width="104" height="114" :src="item.infolist.img" />
            <div style="margin-left:10px;">
              <div class="content_name">{{item.infolist.name}}</div>
              <div class="content_price">
                价格￥
                <span>{{item.infolist.price}}</span>
              </div>
            </div>
          </div>
          <div class="con_right">
            <div class="showmore">查看详情</div>
            <router-link :to="'shopdetail/'+item.infoid">
              <div class="r_btn">购买</div>
            </router-link>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shoplist: []
    };
  },
  mounted() {
    this.getinfo();
  },
  methods: {
    getinfo() {
      this.$http
        .get(
          "https://www.easy-mock.com/mock/5d53cc8b8693be30424c9467/milk/shoplist"
        )
        .then(res => {
          this.shoplist = res.data.shoplist;
        });
    }
  }
};
</script>

<style>
.contain_item {
  margin: 3px 8px;
  padding: 5px;
  box-sizing: border-box;
}

.con_title {
  font-size: 14px;
  background: #fff;
  margin-bottom: 8px;
  padding: 0 10px;
  box-sizing: border-box;
}
.con_content {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  font-size: 14px;
}

.con_left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content_price {
  margin-top: 30px;
}

.showmore {
  margin-bottom: 30px;
  font-weight: bold;
}

.r_btn {
  background: #7ecef4;
  width: 75px;
  height: 20px;
  color: #fff;
  text-align: center;
  line-height: 20px;
  /* margin-right: 20px; */
}
</style>